
 //页面中的数据
 var data = [
    {id: 86995688, name: "张三", tel: '13333333333', user: '系统管理员',time:'2019-10-10/16:06:15',password:'123456',note:'无'},  
    {id: 86995689, name: "李四", tel: '13333333333', user: '维修部主管',time:'2019-10-10/16:06:15',password:'123456',note:'无'},
    {id: 86995690, name: "王五", tel: '13333333333', user: '器材库管',time:'2019-10-10/16:06:15',password:'123456',note:'无'},
    {id: 86995691, name: "张三", tel: '13333333333', user: '系统管理员',time:'2019-10-10/16:06:15',password:'123456',note:'无'},  
    {id: 86995692, name: "李四", tel: '13333333333', user: '维修部主管',time:'2019-10-10/16:06:15',password:'123456',note:'无'},
    {id: 86995693, name: "王五", tel: '13333333333', user: '器材库管',time:'2019-10-10/16:06:15',password:'123456',note:'无'},
    {id: 86995694, name: "张三", tel: '13333333333', user: '系统管理员',time:'2019-10-10/16:06:15',password:'123456',note:'无'},  
    {id: 86995695, name: "李四", tel: '13333333333', user: '维修部主管',time:'2019-10-10/16:06:15',password:'123456',note:'无'},
    {id: 86995696, name: "王五", tel: '13333333333', user: '器材库管',time:'2019-10-10/16:06:15',password:'123456',note:'无'},
    {id: 86995697, name: "张三", tel: '13333333333', user: '系统管理员',time:'2019-10-10/16:06:15',password:'123456',note:'无'},  
    {id: 86995698, name: "李四", tel: '13333333333', user: '维修部主管',time:'2019-10-10/16:06:15',password:'123456',note:'无'},
    {id: 86995699, name: "王五", tel: '13333333333', user: '器材库管',time:'2019-10-10/16:06:15',password:'123456',note:'无'},
    {id: 86995700, name: "张三", tel: '13333333333', user: '系统管理员',time:'2019-10-10/16:06:15',password:'123456',note:'无'},  
    {id: 86995701, name: "李四", tel: '13333333333', user: '维修部主管',time:'2019-10-10/16:06:15',password:'123456',note:'无'},
    {id: 86995702, name: "王五", tel: '13333333333', user: '器材库管',time:'2019-10-10/16:06:15',password:'123456',note:'无'},
];
console.log(data)
//当前的页码
var page = 1;
//每页的条数
var count = 7;
//获取tbody
var oTBody = document.querySelector('tbody');
//获取分页容器
var oPagination = document.querySelector('.pagination');
//跳转按钮
var oJump = document.querySelector('.userManagementBox2');
//获取上一页的按钮
var oPrevBtn = document.querySelector('.prev')
//获取下一页的按钮
var oNextBtn = document.querySelector('.next')
// 添加
var oAddBtn = document.querySelector('.add-classify');
var oCancel = document.querySelector('#cancel');
var oSave = document.querySelector('#save');
// 查看返回
var oReturn = document.querySelector('.returnPage');
// 下载
var oConfirmDownload = document.querySelector('.confirmDownload');
//页面初始化的渲染功能
function render() {
    //搜索
    var oSystemBtn2=document.querySelector('.systemBtn2')
    var oInp1=document.querySelector('.accountNumberOrName');
    var oSelect1=document.querySelector('.characterClassification');
    var oSelect2=document.querySelectorAll('.characterClassification option');
    var text1 = oSelect2[1].text;//可以获取到序号为1的option的值
    var oSelect2=document.querySelector('.characterClassification')
    var data1=[];
    oSystemBtn2.addEventListener('click',searchFn);
    function searchFn(){
    // //判断第一个搜索条件
    // if(oInp1.value=''){//没有搜索内容
    //     data1=data;
    // }else{
    //     for(var i=0;i<data.length;i++){
    //         if(data[i].name=oInp1.value){
    //             data1.push(data[i])   
    //         }
    //         render();
    //     }
    // }
        if(oInp1.value==''){//没有搜索内容
        alert(1);
        data1=data;
        }else{
        
            for(var i=0;i<data.length;i++){
                if(data[i].name==oInp1.value){
                    data1.push(data[i])
                    // console.log(data1);            
                }        
            }
        }
    }

    //让table为空
    oTBody.innerHTML = '';
    //根据count和page准备要渲染的数据
    var renderArr = data.slice((page - 1) * count, page * count);
    // document.querySelector('.all-data-page').innerHTML = Math.ceil(count/10);
    // document.querySelector('.all-data').innerHTML = count;
    //循环要渲染的数据
    for (var i = 0; i < renderArr.length; i++) {
        //创建tr
        var oTr = document.createElement('tr');
        //给tr创建内容
        oTr.innerHTML = `
        <td class = 'serial-number'>${renderArr[i].id}</td>
        <td>${renderArr[i].name}</td>
        <td>${renderArr[i].tel}</td>
        <td>${renderArr[i].user}</td>
        <td>${renderArr[i].time}</td>
        <td>
            <label class="switch">
                <input type="checkbox" checked>
                <div class="slider round"></div>
            </label>
        </td>
        <td>
        <button class="btn  btn-primary view edit">编辑</button>
        <button class="btn btn-danger download del">删除</button>
        </td> 
    `;
        //把tr创建到tbody里面
        oTBody.appendChild(oTr);
    }

    //渲染页码
    //找到所有的页码
    var aPageBtn = document.querySelectorAll('.pageBtn');
    //删除所有的页码
    for(var i=0;i<aPageBtn.length;i++){
        oPagination.removeChild(aPageBtn[i].parentNode);
    }
    //根据数据的长度重新创建页码
    for (var i = 1; i <= Math.ceil(data.length / count); i++) {
        //创建li
        var oLi = document.createElement('li');
        //给li创建内容
        oLi.innerHTML = `<a class="pageBtn" href="#">${i}</a>`;
        //如果li和当前的页码一致，给他加一个选中的class
        if (i == page) {
            oLi.classList.add('active');
        }
        //在下一页的前面插入页码
        oPagination.insertBefore(oLi, oPagination.lastElementChild);
    }
}
//一上来就渲染一次数据
render();
//给分页加事件
oPagination.addEventListener('click', changePage);
function changePage() {
    //如果当前点击的按钮有pageBtn这个class名字
    if (event.target.className == 'pageBtn') {
        //修改全局的page
        page = event.target.innerText;
        //渲染table，渲染分页
        render();
    }
}
//给上一页和下一页加事件
oPrevBtn.addEventListener('click', prev);
oNextBtn.addEventListener('click', next);
function prev() {
    if (page > 1) {
        page--;
        render();
    }
}
function next() {
    if (page < Math.ceil(data.length / count)) {
        page++;
        render();
    }
}
//给跳转按钮加事件
oJump.addEventListener('click',jumpFn);
function jumpFn(){
    var pageNumber = document.querySelector('.paginationBox input').value;
    page = pageNumber;
    render();
}
//共几页
var oNumberOfPages = document.querySelector('.numberOfPages');
var oaNumberOf = document.querySelector('.aNumberOf');
oNumberOfPages.innerHTML=Math.ceil(data.length / count);
oaNumberOf.innerHTML=data.length;


// 添加
var oBtn1=document.querySelector('.userManagementButton1');
var oBox1=document.querySelector('.userManagementBox');
var oBox2=document.querySelector('.systemAddUser');
var oBtn2=document.querySelector('.systemSettingsButton1')
var oBtn3=document.querySelector('.systemSettingsButton2')
oBtn1.addEventListener('click',addUserFn);
oBtn2.addEventListener('click',cancelAddFn);
oBtn3.addEventListener('click',addUserSystemFn);
function addUserFn(){
    oBox1.style.display='none';
    oBox2.style.display='block';
}
function cancelAddFn(){
    oBox1.style.display='block';
    oBox2.style.display='none';
}
function addUserSystemFn() {
    var addId = document.querySelector('.addId').value;
    var addName = document.querySelector('.addName').value;
    var addUser = document.querySelector('.addUsers').value;
    var addTel = document.querySelector('.addTel').value;
    
    // 格式化日对象
    const getNowDate = () => {
        var date = new Date();
        var sign2 = ":";
        var year = date.getFullYear() // 年
        var month = date.getMonth() + 1; // 月
        var day = date.getDate(); // 日
        var hour = date.getHours(); // 时
        var minutes = date.getMinutes(); // 分
        var seconds = date.getSeconds() //秒
        var weekArr = ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期天'];
        var week = weekArr[date.getDay()];
    // 给一位数的数据前面加 “0”
        if (month >= 1 && month <= 9) {
            month = "0" + month;
        }
        if (day >= 0 && day <= 9) {
            day = "0" + day;
        }
        if (hour >= 0 && hour <= 9) {
            hour = "0" + hour;
        }
        if (minutes >= 0 && minutes <= 9) {
            minutes = "0" + minutes;
        }
        if (seconds >= 0 && seconds <= 9) {
        seconds = "0" + seconds;
        }
        return year + "-" + month + "-" + day + "/" + hour + sign2 + minutes + sign2 + seconds;
        }
    data.unshift({
        id: addId,
        name: addName,
        tel: addTel,
        user: addUser,
        time: getNowDate(),
        pass: '123456',
        note:'无',
    })
    render();
    //让添加框隐藏
    oBox1.style.display='block';
    oBox2.style.display='none'; 
}
//删除功能
oTBody.addEventListener('click', del);
function del() {
    if (event.target.className.includes('del')) {
        //找到id
        var id = event.target.parentNode.parentNode.children[0].innerText;
        //循环数据对比
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == id) {
                //删除id所对应的数据
                data.splice(i, 1);
            }
        }
        //重新渲染
        render();
    }
}
//给所有的编辑按钮加事件
var oEditTheUser = document.querySelector('.editTheUser');
oTBody.addEventListener('click', openEdit);
function openEdit() {
    //判断事件源

    if (event.target.className.includes('edit')) {
        //让编辑框显示
        
        oBox1.style.display='none';
        oEditTheUser.style.display='block';
        //确认是那个id的数据
        var id = event.target.parentNode.parentNode.children[0].innerText;
        //循环数据，找到对应id的，给编辑框赋值
        for (var i = 0; i < data.length; i++) {
            if (data[i].id == id) {
                document.querySelector('.editId').value = data[i].id;
                document.querySelector('.editUser').value = data[i].user;
                document.querySelector('.editName').value = data[i].name;
                document.querySelector('.editPass').value = data[i].pass;
                document.querySelector('.editTel').value = data[i].tel;
                document.querySelector('.editNote').value = data[i].note;
            }
        }
    }

}
//点击修改保存
var oEditTheUserButton1 = document.querySelector('.editTheUserButton1');
var oEditTheUserButton2 = document.querySelector('.editTheUserButton2');
oEditTheUserButton1.addEventListener('click', editCancelFn);
oEditTheUserButton2.addEventListener('click', editDetermineFn);
function editCancelFn(){
    oBox1.style.display='block';
    oEditTheUser.style.display='none';
}
function editDetermineFn(){
// 看替换的是哪一条；
    var id = document.querySelector('.editId').value;
    //循环数据，找到对应的，更改
    for (var i = 0; i < data.length; i++) {
        if (data[i].id == id) {
            data[i].name = document.querySelector('.editName').value;
            data[i].tel = document.querySelector('.editTel').value;
            data[i].user = document.querySelector('.editUser').value;
            data[i].pass = document.querySelector('.editPass').value;
            data[i].note = document.querySelector('.editNote').value;
        }
    }
    //关闭弹框
    oBox1.style.display='block';
    oEditTheUser.style.display='none';
    //重新渲染
    render();
}

// console.log(data1);
//重置
var oSystemBtn1=document.querySelector('.systemBtn1')
oSystemBtn1.addEventListener('click',resetFn);
function resetFn(){
    oInp1.value='';
}



